import React from 'react';
import { Box, LoadingPlaceholder, SimpleAccordion, Text } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { useTranslation } from 'beta/utils/i18n';
import { TFunction } from 'next-i18next';
import { Port } from 'typings/graphql';

import { ConnectionStatus, GlowingConnectionStatus } from './ConnectionStatus';
import { GetHelpButtons } from './GetHelpButtons';

type FiberBoxContentProps = {
  ports?: Array<Port> | undefined;
  isBoxActive: boolean;
  isLoading: boolean;
  color: MainColorType;
  uptime: string;
};

const dateTypeToString = (uptimeUnit: string, t: TFunction) => {
  switch (uptimeUnit) {
    case 'Y':
      return t('fiberBoxContent.uptime.year');
    case 'W':
      return t('fiberBoxContent.uptime.weeks');
    case 'M':
      return t('fiberBoxContent.uptime.months');
    case 'D':
      return t('fiberBoxContent.uptime.days');
    case 'h':
      return t('fiberBoxContent.uptime.hours');
    case 'm':
      return t('fiberBoxContent.uptime.min');
    case 's':
      return t('fiberBoxContent.uptime.sec');
    default:
      return '-';
  }
};

const BulletList = ({ listItems }: { listItems: Array<string> }) => {
  return (
    <Box renderAs="ul" marginLeft={5}>
      {listItems.map((item, i) => (
        <Box key={`${i}__${item}`} renderAs="li" style={{ listStyle: 'disc' }} marginY={1}>
          <Text variant="pMediumRegular">{item}</Text>
        </Box>
      ))}
    </Box>
  );
};

export const FiberBoxContent = ({
  color,
  ports,
  uptime,
  isBoxActive,
  isLoading,
}: FiberBoxContentProps) => {
  const { t } = useTranslation('fiber');
  const uptimeTimes = uptime.split(/[a-z]/gi).filter(Boolean);
  const uptimeUnits = uptime.split(/[0-9]/).filter(Boolean);

  const formatPortSpeed = (portSpeed: string): string => {
    // find first parenthesis and then remove the parenthesis
    const speed = portSpeed.match(/\([^\)]+\)/g)?.[0]?.replace(/[()]/g, '');
    return !isNaN(Number(speed)) ? `(${speed}Mbps)` : '';
  };

  if (isLoading) {
    return (
      <Box padding={{ sm: 1, md: 3 }}>
        <Box marginBottom={2}>
          <LoadingPlaceholder width="5/12" height={4} />
        </Box>
        <Box>
          <LoadingPlaceholder width="100%" height={12} />
        </Box>
      </Box>
    );
  }

  return (
    <Box paddingX={9}>
      <Box display="flex" flexDirection="column" gap={2}>
        <Text variant="pMediumBold">{t('fiberBoxContent.troubleShooting.eyeBrow')}</Text>
        <Text variant="pMediumRegular">{t('fiberBoxContent.troubleShooting.description')}</Text>
      </Box>
      <Box marginTop={3} marginBottom={2}>
        <SimpleAccordion
          color={color}
          icon="power"
          title={t('fiberBoxContent.simpleAccordion.power.title')}
          marginBottom={2}
        >
          <Box display="flex" gap={1} flexDirection="column" paddingX={[3, 3, 8]} paddingBottom={3}>
            <GlowingConnectionStatus
              title={t('fiberBoxContent.simpleAccordion.power.on.title')}
              description={t('fiberBoxContent.simpleAccordion.power.on.description')}
              isConnected
            />
            <GlowingConnectionStatus
              title={t('fiberBoxContent.simpleAccordion.power.off.title')}
              description={t('fiberBoxContent.simpleAccordion.power.off.description')}
            />
            <BulletList
              listItems={[
                t('fiberBoxContent.simpleAccordion.power.listItems.0'),
                t('fiberBoxContent.simpleAccordion.power.listItems.1'),
                t('fiberBoxContent.simpleAccordion.power.listItems.2'),
              ]}
            />
          </Box>
        </SimpleAccordion>
        <SimpleAccordion
          color={color}
          icon="arrowsLeftRight"
          title={t('fiberBoxContent.simpleAccordion.link.title')}
          marginBottom={2}
        >
          <Box display="flex" gap={1} flexDirection="column" paddingX={[3, 3, 8]} paddingBottom={3}>
            <GlowingConnectionStatus
              title={t('fiberBoxContent.simpleAccordion.link.on.title')}
              description={t('fiberBoxContent.simpleAccordion.link.on.description')}
              isConnected
            />
            <GlowingConnectionStatus
              title={t('fiberBoxContent.simpleAccordion.link.off.title')}
              description={t('fiberBoxContent.simpleAccordion.link.off.description')}
            />
            <BulletList
              listItems={[
                t('fiberBoxContent.simpleAccordion.link.listItems.0'),
                t('fiberBoxContent.simpleAccordion.link.listItems.1'),
              ]}
            />
          </Box>
        </SimpleAccordion>
        <SimpleAccordion
          color={color}
          icon="oppositeArrows"
          title={t('fiberBoxContent.simpleAccordion.data.title')}
          marginBottom={2}
        >
          <Box display="flex" gap={1} flexDirection="column" paddingX={[3, 3, 8]} paddingBottom={3}>
            <GlowingConnectionStatus
              title={t('fiberBoxContent.simpleAccordion.data.on.title')}
              description={t('fiberBoxContent.simpleAccordion.data.on.description')}
              isConnected
            />
            <GlowingConnectionStatus
              title={t('fiberBoxContent.simpleAccordion.data.off.title')}
              description={t('fiberBoxContent.simpleAccordion.data.off.description')}
            />
            <BulletList
              listItems={[
                t('fiberBoxContent.simpleAccordion.data.listItems.0'),
                t('fiberBoxContent.simpleAccordion.data.listItems.1'),
                t('fiberBoxContent.simpleAccordion.data.listItems.2'),
                t('fiberBoxContent.simpleAccordion.data.listItems.3'),
              ]}
            />
          </Box>
        </SimpleAccordion>
      </Box>

      <Box
        display="flex"
        flexDirection={{ sm: 'column', xl: 'row' }}
        gap={2}
        borderColor="grey200"
        borderStyle="solid"
        borderWidth="1px"
        padding={3}
        justifyContent={{ sm: 'flex-start', xl: 'space-between' }}
        marginBottom={{ sm: 3, lg: 5 }}
      >
        <Box>
          <Text renderAs="div" variant="eyebrowMedium" color="grey600" marginBottom={1}>
            {t('fiberBoxContent.ports.title')}
          </Text>
          {ports && (
            <Box display="flex" flexWrap="wrap" columnGap={3}>
              <Box>
                {ports?.map((port) => {
                  return (
                    <ConnectionStatus
                      key={port.portNumber}
                      title={t('fiberBoxContent.ports.port', { portNumber: port.portNumber })}
                      isConnected={port.isPortConnected ?? false}
                      speed={port.portSpeed ? formatPortSpeed(port.portSpeed) : undefined}
                    />
                  );
                })}
              </Box>
            </Box>
          )}
          <ConnectionStatus title={t('fiberBoxContent.ports.uplink')} isConnected={isBoxActive} />
        </Box>
        <Box>
          <Text renderAs="div" variant="eyebrowMedium" color="grey600" marginBottom={1}>
            {t('fiberBoxContent.uptime.title')}
          </Text>
          <Box display="flex" flexWrap="wrap" gap={1}>
            {uptime &&
              uptimeTimes.slice(0, 5).map((number, i) => {
                return (
                  <Box
                    key={`${i}__${number}`}
                    display="flex"
                    alignItems="center"
                    justifyContent="center"
                    borderColor="grey200"
                    borderStyle="solid"
                    borderWidth="1px"
                    borderRadius="medium"
                    width={7}
                    height={9}
                  >
                    <Box>
                      <Text variant="pLargeBold" textAlign="center">
                        {number}
                      </Text>
                      <Text variant="eyebrowSmall" color="grey400" textAlign="center">
                        {dateTypeToString(uptimeUnits[i], t)}
                      </Text>
                    </Box>
                  </Box>
                );
              })}
          </Box>
        </Box>
      </Box>
      <Box marginBottom={4}>
        <GetHelpButtons
          color={color}
          href="https://support.nova.is/hc/is/articles/28906627747857-Bilanagreining-Ljósleiðaratengingar#h_01JAWPZY23MBEWCE0HTG1QZVNN"
        />
      </Box>
    </Box>
  );
};